import { Component, ComponentRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { map as _map, filter as _filter } from 'lodash-es';
import { IImageTextComponent } from './IImageText-component';
import { ContentListConfigItem, MenuInfoConfig, MenuInfoSyncServiceProxy } from '@shared/service-proxies/service-proxies';
import { ImageTextService } from './imageText.service';
import { MenuExtendModalComponent } from './menu-extend-modal.component';



@Component({
    selector: 'image-text-modal',
    templateUrl: './image-text-modal.component.html',
})
export class ImageTextModalComponent extends AppComponentBase implements IImageTextComponent {
    
    @ViewChild('modal', { static: true }) modal: ModalDirective;
    @ViewChild('extendedDataModal', { static: true }) extendedDataModal: MenuExtendModalComponent;
    @ViewChild('vc2', { read: ViewContainerRef }) vc: ViewContainerRef;

    cmpRef: ComponentRef<any>;
    menuConfig: MenuInfoConfig;
    selectedTabId: string = 'contentTab';
    menuId: string;
    kind:number;
    menuName: string;
    permissionDic: { [key: string]: boolean } = {};
    hasConfigPermission = this.permission.isGranted('Pages.Tenant.MenuInfo.Config');

    listData: { [key: string]: { [key: string]: any }[] } = {};
    data: { [key: string]: { [key: string]: any } } = {};
    Collapse: { [key: string]: boolean } = {};
    randomId :{ [key: string]: string}= {};
    formNameCache :{ [key: string]: string}= {};

    listConfig: { [key: string]: ContentListConfigItem[]; }= {};

    isTemporary :{ [key: string]: boolean}= {};
    saving = false;

    isModal = true;

    dataSynchronous: boolean = false;

    constructor(
        private _imageTextService: ImageTextService,
        private _menuInfoSyncServiceProxy:MenuInfoSyncServiceProxy,
        injector: Injector
    ) {
        super(injector);
        this.menuConfig = this._imageTextService.getDefaultConfig();
    }

    show(menuConfig: MenuInfoConfig, menuId: string, kind: number, menuName: string, permissionDic: { [key: string]: boolean }): void {
        this.dataSynchronous = this.setting.getBoolean("App.Synchronous.DataSynchronous");
        
        this.menuConfig = menuConfig;
        this.menuId = menuId;
        this.kind = kind;
        this.menuName = menuName;
        this.permissionDic = permissionDic;

        this.init();
        this.modal.show();
    }

    close(): void {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        this.modal.hide();
    }

    
    private init() {
        this._imageTextService.init(this, null,()=>{
            if (this.menuConfig.imageText.enable) {
                this._imageTextService.initForms(this);
            }
        });
    }

    save(){
        this._imageTextService.save(this);
    }

    imageTextUpdate(key) {
        this._imageTextService.imageTextUpdate(this, key);
    }
    
    createNews(key: string) {
        this.openCreateOrEditModal(null, key);
    }

    editModule(record: { [key: string]: any }, key: string) {
        this.openCreateOrEditModal(record, key);
    }

    callbackAfterSave(){
        this.close();
    }

    synchorization(){
        this._imageTextService.synchorization(this);
    }
    reloadPage() {
        this.init();
    }
    private openCreateOrEditModal(record: { [key: string]: any }, key: string) {
        let config = this._imageTextService.getConfigByKey(this, key);
        this.extendedDataModal.show(this.kind, this.menuId, this.permissionDic,config.form, key, record?.id);
    }
}
